box-border($border-color, $top, $right, $bottom, $left, $border-style = solid)
  border-style: $border-style
  border-color: $border-color
  border-width: $top $right $bottom $left
//个人
box-position($left = 50%, $top = 50%, $x = -50%, $y = -50%, $position = absolute)
  position: $position
  left: $left
  top: $top
  transform:translate($x, $y)
layout-position($top = 0, $right = 0, $bottom = 0, $left = 0, $position = absolute)
  position: $position
  top: $top
  right: $right
  bottom: $bottom
  left: $left
box-middle($x = -50%, $y = -50%)
  position: absolute
  left: 50%
  top: 50%
  transform:translate($x, $y)
fixedbox-middle($w, $h)
  position: absolute
  left: 50%
  top: 50%
  margin-left: (-$w / 2)
  margin-top: (-$h / 2)
box-center($w, $mt = 0, $mb = 0)
  width: $w
  margin: $mt auto $mb
right-middle($right = 15px, $x = 0, $y = -50%)
  position: absolute
  right: $right
  top: 50%
  transform:translate($x, $y)
left-middle($left = 15px, $x = 0, $y = -50%)
  position: absolute
  left: $left
  top: 50%
  transform:translate($x, $y)
ellipsis()
  overflow: hidden
  text-overflow: ellipsis
  white-space: nowrap
ellipsis-more($lines)
  display: -webkit-box
  overflow: hidden
  text-overflow: ellipsis
  word-wrap: break-word
  white-space: normal !important
  -webkit-line-clamp: $lines
  -webkit-box-orient: vertical
circular($size)
  width: $size
  height: $size
  border-radius: 50%
  display: flex
  line-height: 1
  align-items: center
  justify-content: center
full-box($top = 0, $right = 0, $bottom = 0, $left = 0)
  position: absolute
  top: $top
  right: $right
  bottom: $bottom
  left: $left
bg-box($height)
  height: $height
  background-position: center center
  background-repeat: no-repeat
  background-size: cover
fine-border($direction, $border-color, $left = 0, $right = 0)
  position: relative
  &:before
    content: ""
    position: absolute
    background-color: $border-color
    z-index: 9
    if $direction == top
      height: 1px
      left: $left
      right: $right
      top: 0
      transform: scaleY(0.5)
      transform-origin: top
    if $direction == bottom
      height: 1px
      left: $left
      right: $right
      bottom: 0
      transform: scaleY(0.5)
      transform-origin: bottom
    if $direction == left
      width: 1px
      left: 0
      top: 0
      bottom: 0
      transform: scaleX(0.5)
      transform-origin: left
    if $direction == right
      width: 1px
      top: 0
      right: 0
      bottom: 0
      transform: scaleX(0.5)
      transform-origin: right
fine-border-two($direction, $border-color)
  position: relative
  if $direction == tb
    &:before,&:after
      content: ""
      position: absolute
      background-color: $border-color
      transform: scaleY(0.5)
      height: 1px
      left: 0
      right: 0
    &:before
      top: 0
      transform-origin: top
    &:after
      bottom: 0
      transform-origin: bottom
  if $direction == lr
    &:before,&:after
      content: ""
      position: absolute
      background-color: $border-color
      transform: scaleX(0.5)
      width: 1px
      top: 0
      bottom: 0
    &:before
      left: 0
    &:after
      right: 0
icon-size($size)
  font-size: $size
  display: inline-block
  width: $size
  height: $size
  line-height: $size
  text-align: center
  i
    display: block
    font-size: $size
    width: 100%
    height: 100%

fine-border-box($bc,$rds)
  border:1px solid rgba(#000,0)
  position: relative;
  border-radius: $rds
  &:after
    content: ""
    border: 1px solid $bc
    border-radius: $rds * 2;
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 200%
    transform: scale(.5) translateZ(0);
    transform-origin: 0 0
// screen
//-----------------------------------------------------
screen($resMin, $resMax)
  @media screen and (min-width: $resMin) and (max-width: $resMax)
    {block}
max-screen($res)
  @media screen and (max-width: $res)
    {block}
min-screen($res)
  @media screen and (min-width: $res)
    {block}
screen-height($resMin, $resMax)
  @media screen and (min-height: $resMin) and (max-height: $resMax)
    {block}
max-screen-height($res)
  @media screen and (max-height: $res)
    {block}
min-screen-height($res)
  @media screen and (min-height: $res)
    {block}
